<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Oregon T-SUM 200 Weather Calculator</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>

<script type='text/javascript'>
$(window).load(function(){
var stations= {
" -- Willamette Valley --":"",
"Junction City, Near Meadowview":"MD5719",
"Eugene-Springfield":"KORSPRIN10",
"Junction City":"KORJUNCT4",
"Monmouth, Dallas":"KORDALLA4",
"Corvallis":"KORCORVA4",
"Scio":"KORTURNE1",
"Silverton":"KORAUMSV3",
"Albany":"KORALBAN30",
" -- South Coast -- ":"",
"Myrtle Point":"KORMYRTL5",
"Coquille":"KORCOQUI3",
"Coos Bay":"KORCOOSB8",
"Bandon ":"KORBANDO2",
"Port Orford":"KORPORTO2",
" -- Douglas County -- ":"",
"Myrtle Creek":"KORMYRTL13",
"Riddle":"KORRIDDL2",
"Elkton":"KORELKTO2",
"Sutherlin":"KORSUTHE2",
"Garden Valley (west of Roseburg)":"KORROSEB4",
"Cottage Grove":"KORCOTTA5",
" -- Southern Oregon --":"",
"Grants Pass":"KORGRANT4",
"White City":"KORWHITE4",
};
for (var text in stations) {
    var val = stations[text];
    $('<option/>').val(val).text(text).appendTo($('#selector'))
};
});

function httpGet(a,b) {
    if (a=="") {
        alert('select a valid option');
        return;
    }
    var xmlHttp = null;
    theUrl = "/weather/api/stationHTML/"+a+"/"+b;

    $.ajax({
  	url: theUrl,
  	cache: false,
  	timeout: 4000
    }).done(function( html ) {
   	$( "#contents" ).append( html );
    }).fail(function(jqXHR,textStatus) {
	   if (textStatus == "timeout") {
		alert ("Timed out waiting for wunderground response! There appears to be a communications error somewhere between this script and the wunderground servers.  Please check back later!");
	    } else {
		alert ("Error completing request!");
	    }
     });
}

function clearResults() {
    $("#contents").html("");
}
</script>

</head>
<body>
<h2>Oregon T-SUM 200/ Weather Calculator</h2>

<select id="selector" name="selector"></select>
<input type=submit name=submit onclick='httpGet($("#selector").val(),$("#selector option:selected").text())';>
<br><a href='#' onclick='clearResults();'>Clear results</a>

<p>

<div id="contents"></div>
</body>

</html>